<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<p>我的段落</p>
		<div>我的 Div</div>
		<button>我的按钮</button>
		<p class="my-class">我的class</p>
		<!-- Our template -->
		<template class="shadow-template">
			<style>
				:host(p) {
					color: blue;
				}
				
				 :host(div) {
					color: green;
				}
				
				 :host(button) {
					color: red;
				}
				
				:host(.my-class) {
					color: orange;
				}
				
				 :host(*) {
					font-size: 24px;
				}
			</style>
			<content select=""></content>
		</template>

		<script>
			// 给每一个元素创建一个影子根
			var root1 = document.querySelector('p').createShadowRoot();
			var root2 = document.querySelector('div').createShadowRoot();
			var root3 = document.querySelector('button').createShadowRoot();
			var root4 = document.querySelector('.my-class').createShadowRoot();


			// 对于每一个影子根使用同一个模板
			var template = document.querySelector('.shadow-template');

			// 把每一个模板嵌入影子根中，注意一下不同的 :host 样式对显示效果的影响
			root1.appendChild(document.importNode(template.content, true));
			root2.appendChild(document.importNode(template.content, true));
			root3.appendChild(document.importNode(template.content, true));
			root4.appendChild(document.importNode(template.content, true));
		</script>
	</body>

</html>